<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>系统登录</title>
    <meta charset="utf-8">
    <script src="${pageContext.request.contextPath}/static/js/polyfill.js"></script>
    <%--使ie兼容es6语法--%>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <%--兼容ie浏览器--%>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquerymin.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layer-v3.5.1/layer/layer.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/dist/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/dist/layui.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/meet.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/util.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/main.css">
    <script src="${pageContext.request.contextPath}/static/js/axios-min.js"></script>
    <style>#navbar-default {
        background-color: #71BD71;
    }
    .container-login100-form-btn button:nth-child(1){

    }
    .container-login100-form-btn button:nth-child(2){
        opacity: 0.5;
        display: none;
    }
    </style>
</head>
<body>
<div id="header" style="height: 13px">
    <nav id="navbar-default" class="navbar navbar-default top-nabar" role="navigation"
         style="overflow:hidden;position:fixed;top:0;width:100%;z-index:1002;margin-bottom: 10px;border: 0">
        <div class="row">
            <div class="container-fluid" id="fluid">
                <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style=";padding-left: 6px;">
                    <a class="navbar-brand" href="/boke/index.jsp"
                       style="padding-left: 3px;">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                </div>

                <div class="col-lg-11 col-md-11 col-xs-11 col-sm-11">
                    <span class="glyphicon glyphicon-home" aria-hidden="true"
                          style="float: right;margin-top: 16px;color:#EAFFD3 "></span>
                </div>

            </div>
        </div>
    </nav>
    <br><br>
</div>

<div class="login">
    <div class="container-login100">
        <div class="wrap-login100">
            <i class="layui-icon layui-icon-home" style="position: absolute;right: 8px;top: 2px"></i>
            <div class="login100-pic js-tilt" data-tilt>
                <img src="${pageContext.request.contextPath}/resource/images/img-01.png" alt="IMG">
            </div>
            <%--密码登录域--%>
            <form class="login100-form validate-form form-1" id="form-1" style="margin: 0 auto;
            text-align: center;">
                <img src="${pageContext.request.contextPath}/resource/images/login_logo.png" alt="IMG" width="200px"
                     height="53px" style="vertical-align:middle;margin-bottom: 50px"><span></span>
                <span class="h-px w-16 bg-gray-200"></span>
                <div class="wrap-input100 validate-input">
                    <input id="username-1" class="input100" type="text" name="username" placeholder="用户名">
                    <i id="clear-1" class="layui-icon layui-icon-close-fill"></i>
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
						<i class="fa fa-user" aria-hidden="true"></i>
					</span>
                </div>

                <div class="wrap-input100 validate-input">
                    <input id="password-1" class="input100" type="password" name="password" placeholder="密码">
                    <i id="clear-2" class="layui-icon layui-icon-close-fill"></i>
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
						<i class="fa fa-lock" aria-hidden="true"></i>
					</span>
                </div>

                <div class="container-login100-form-btn">
                   <button class="login100-form-btn" type="button" onclick="login()">
                        登录
                    </button>
                    <button class="login100-form-btn" type="button"  onclick="login();">
                        <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>登录中
                    </button>
                </div>
                <%--添加条款--%>
                <div id="xieyi">
                    <input id="agreement" type="checkbox" name="like1[write]" lay-skin="primary" title="" value="ok"
                           style="padding: 0;margin-top: 10px">
                    <span class="cm">我已阅读并同意</span><span class="cm" style="color: #f9711d"
                                                         onclick="Agreement(1)">用户协议</span><span
                        class="cm">和</span><span
                        style="color: #f9711d" onclick="Agreement(2)" class="cm">隐私条款</span>
                </div>
                <div class="text-center p-t-20 text-one">
                    <a class="txt1" href="javascript:" onclick="Switching()">
                        验证码登录
                    </a>
                    <a class="txt2" href="${pageContext.request.contextPath}/user/pagefind">
                        忘记密码？
                    </a>
                </div>
                <div class="text-center p-t-136">
                    <a class="txt2" href="${pageContext.request.contextPath}/user/register">
                        还没有账号？立即注册
                        <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
                    </a>
                </div>
            </form>
            <%--验证码登录域--%>
            <form class="login100-form validate-form form-2" style="display: none;margin: 25px auto;
            text-align: center" id="form-2"><span></span>
                <img src="${pageContext.request.contextPath}/resource/images/login_logo.png" alt="IMG" width="200px"
                     height="53px" style="vertical-align:middle;margin-bottom: 50px"><span></span>
                <span class="h-px w-16 bg-gray-200"></span>
                <span class="h-px w-16 bg-gray-200"></span>
                <div class="wrap-input100 validate-input">
                    <input id="phone" class="input100" type="text" name="phone" placeholder="手机" maxlength="11"
                           onkeyup="value=value.replace(/[^\d]/g,'')">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
						<i class="fa fa-mobile" aria-hidden="true"></i>
					</span>
                </div>
                <div class="wrap-input100 validate-input">
                    <input id="yzm-1" class="input100" name="captcha" placeholder="验证码" maxlength="6"
                           onkeyup="value=value.replace(/[^\d]/g,'')" style="width: 60%;display: inline">
                    <input id="yzm-2" class="input100" type="text" name="pass" placeholder="获取验证码" onfocus=this.blur()
                           onclick="getCaptcha(this)">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
						<i class="fa fa-lock" aria-hidden="true"></i>
					</span>
                </div>
                <div class="container-login100-form-btn">
                <button class="login100-form-btn" type="button" onclick="captchaLogin()">
                    登录
                </button>
                    <button class="login100-form-btn" type="button" onclick="captchaLogin();">
                        <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>登录中
                    </button>
                </div>
                <%--添加条款--%>
                <div id="xieyi">
                    <input id="agreement1" type="checkbox" name="like1[write]" lay-skin="primary" title="" value="ok"
                           style="padding: 0;margin-top: 10px">
                    <span class="cm">我已阅读并同意</span><span class="cm" style="color: #f9711d"
                                                         onclick="Agreement(1)">用户协议</span><span
                        class="cm">和</span><span
                        style="color: #f9711d" onclick="Agreement(2)" class="cm">隐私条款</span>
                </div>
                <div class="text-center p-t-20">
                    <a class="txt1" href="javascript:" onclick="Switching('double')">
                        密码登录
                    </a>
                    <a class="txt2" href="${pageContext.request.contextPath}/user/pagefind">
                        忘记密码？
                    </a>
                </div>

                <div class="text-center p-t-136">
                    <a class="txt2" href="${pageContext.request.contextPath}/user/register">
                        还没有账号？立即注册
                        <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
                    </a>
                </div>
            </form>

        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        //如果是从注册成功后跳转到登录页面的,自动填充页面用户名
        var myurl = loginGetQueryString("loginName")
        if (myurl != null && myurl.toString().length > 1) {
            $("#username-1").val(myurl)
        }
        $(".layui-icon-close-fill").hide();
        $("#header").hide();
    });
    //按钮状态
    var loginButtonStatus=false;
    //获取地址栏后面的参数
    function loginGetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    //切换表单
    function Switching(i) {
        if (i != 'double') {
            $(".form-1").css("display", "none")
            $(".form-2").css("display", "block")

        }
        if (i == 'double') {
            $(".form-1").css("display", "block")
            $(".form-2").css("display", "none")
        }
    }

    //给提交的手机号发送验证码，并启用倒计时方法
    function getCaptcha(obj) {
        let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;  //手机号匹配正则
        if ($("#phone").val() == null || $("#phone").val() == '') {
            layer.msg('手机不能为空');
            return false;
        }
        if (!reg_tel.test($("#phone").val())) {
            layer.msg('手机格式不正确');
            return false;
        }
        if ($("#phone").val().length < 11) {
            layer.msg('请输入11位手机号码');
        } else {
            countdown(60, obj);
            let form = new FormData();
            form.append("phone", $("#phone").val());
            axios({
                method: 'post',
                url: '${pageContext.request.contextPath}/user/sendmessage',
                data: form
            })
                .then(function (response) {
                    if (response.data == "success") {
                        layer.alert('验证码已发送，请查收', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        })
                    } else {
                        alert("发送失败,请重试")
                    }
                }).error(error=>{
                alert("发送失败,请重试")
            })
        }
    }

    //执行倒计时方法
    function countdown(seconds, obj) {
        if (seconds > 1) {
            seconds--;
            $(obj).val(seconds + "秒后获取 ").attr("disabled", true);
            // 定时1秒调用一次
            setTimeout(function () {
                countdown(seconds, obj);
            }, 1000);
        } else {
            $(obj).val("获取验证码").attr("disabled", false);
        }
    }

    //用户名密码异步提交登录
    function login() {
        let username = $("#username-1").val().trim();
        let password = $("#password-1").val().trim();
        let isclick = $("#agreement").is(':checked');
        if (isclick == false) {
            layer.tips('请阅读用户协议和隐私条款并点击同意', '#agreement', {
                tips: [1, '#3595CC'],
                time: 1000
            });
            return false;
        }
        if (username == '' || username == null || password == '' || password == null) {
            layer.alert('用户名或密码不能为空哦', {
                skin: 'layui-layer-molv'
                , closeBtn: 0
            })
            return false;
        }

        let form = new FormData();
        form.append("username", username);
        form.append("password", password);
        axios({
            method: "post",
            url: "${pageContext.request.contextPath}/user/checkLogin",
            data: form
        }).then(function (response) {
            if (response.data == "loginFalse") {
                layer.alert('用户名或密码错误', {
                    skin: 'layui-layer-lan'
                    , closeBtn: 0
                })
            } else {
                getBokeLogin(form.get("username"),form.get("password"));
                /*window.location.href = "/boke/login-before.jsp?username=" + form.get("username") + "&password=" + form.get("password");*/
            }
        }).catch(error=>{
            alert("登录错误")
        })
    }
    //验证码登录
    function captchaLogin() {
        let captcha = $("#yzm-1").val().trim();
        let phone = $("#phone").val().trim();
        let isclick = $("#agreement1").is(':checked');
        if (isclick == false) {
            layer.tips('请阅读用户协议和隐私条款并点击同意', '#agreement1', {
                tips: [1, '#3595CC'],
                time: 1000
            });
            return false;
        }
        if (captcha == '' || captcha == null || phone == '' || phone == null) {
            layer.alert('手机号或验证码不能为空哦', {
                skin: 'layui-layer-molv'
                , closeBtn: 0
            })
            return false;
        }
        let form2 = new FormData();
        form2.append("phone", phone);
        form2.append("captcha", captcha);
        axios({
            method: "post",
            url: "${pageContext.request.contextPath}/user/checkLoginByCaptcha",
            data: form2,
        }).then(function (response) {
            if (response.data == "loginFalse") {
                layer.alert('验证码错误或此用户不存在', {
                    skin: 'layui-layer-lan'
                    , closeBtn: 0
                })
            } else {
                getBokeLogin(response.data.split("&")[0],response.data.split("&")[1]);
               /* window.location.href = "/boke/login-before.jsp?username=" + response.data.split("&")[0] + "&password=" + response.data.split("&")[1];*/
            }
        }).catch(err=>{
            console.log("登录失败")
        })
    }
    function getBokeLogin(username,password) { //请求boke登录接口  直接跳转,抛弃现有接口
        axios({
            url:"/boke/applogin_mlogin.do?userName="+username+"&password="+password,
            method:"get",
        }).then(response=>{
            if(response.data.result==="login_ok"){
                window.location.href="/boke/me.jsp"
            }
        }).catch(err=>{
            console.log("登录失败")
        })
    }

    function Agreement(index) {
        window.location.href = "${pageContext.request.contextPath}/user/terms/" + index;
    }

    $(".glyphicon-home").click(function () {
        window.location.href = "/boke/index.jsp";
    })
    //用于账号密码框清空
    $("#username-1").on('focus', function () {
        $(".layui-icon-close-fill:eq(0)").show();
    })
    $("#password-1").on('focus', function () {
        $(".layui-icon-close-fill:eq(1)").show();
    })
    $("#clear-1").click(function () {
        $("#username-1").val('')
        $("#clear-1").hide();
    })
    $("#clear-2").click(function () {
        $("#password-1").val('')
        $("#clear-2").hide();
    })
    $(".input100").blur(function () {
        setTimeout(function () {
            $(".layui-icon-close-fill").hide();
        }, 6000);
    })
    $(".layui-icon-home").click(()=>{
        window.location.href="/boke/me.jsp"
    })

</script>
</body>
</html>
